<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
  
  1 表单容器 form
  -->

  <form>
    <div>
      <!-- 
      label
      1 显示文本
      2 扩大响应区域   
          1 label for  =  其他表单 id 
          2 把表单标签 放在 label 中也行 
       -->
      <label for="user">文本框</label>
      <input id="user" type="text" name="username" placeholder="用户名" value="">
    </div>
    <div>
      <label>密码框</label>
      <input type="password">
    </div>
    <div>
      <label>单选框</label>
      <input name="gender" type="radio" value="1" id="nan"> <label for="nan">男</label>

      <label>

        <input name="gender" type="radio" value="0"> 女
      </label>
    </div>
    <div>
      <label>复选框</label>
      <input type="checkbox" value="a"> 🍉
      <input type="checkbox" value="b"> 🍎
    </div>
    <div>
      <label>文本域</label>
      <textarea placeholder="请输入评价"></textarea>
    </div>
    <div>
      <!-- 
      button 默认值就是 submit 提交
      type = button  普通按钮
       -->
      <button type="button">普通的按钮</button>
      <button type="submit">提交按钮</button>
      <button type="reset">重置按钮</button>
    </div>
  </form>
</body>

</html>